<template>
	<view class="wrapper coupon">
		<view class="coupon-tab">
			<u-tabs
				lineColor="#e3230e"
				lineWidth="90rpx"
				:itemStyle="{
					height: '80rpx',
					fontSize: '32rpx'
				}"
				:inactiveStyle="{
					color: '#333333'
				}"
				:activeStyle="{
					color: '#e3230e',
					fontWeight: '600'
				}"
				:scrollable="false"
				:list="tabList"
				@click="clickTab"></u-tabs>
		</view>
		<view class="coupon-content">
			<view class="coupon-list">
				<view class="coupon-one" v-for="(item, index) in tableList" :key="index">
					<coupon-item :coupon="item">
						<template #receive="{item1}">
							<view class="coupon-item-btn main-flex" v-if="item.status === 0" @click="goCategory(item)">立即使用</view>
						</template>
					</coupon-item>
				</view>
			</view>
			<!--加载-->
			<view
				v-if="isNull"
				class="null main-flex">
				<u-empty text="暂无优惠券" icon="/static/images/null.png"></u-empty>
				<view class="null-btn" @click="goCoupon">去领券</view>
			</view>
			<view
				v-else
				class="more main-flex">
				<uni-load-more :status="status" :showText="false" />
			</view>
		</view>
		
		<view class="coupon-bottom safe-area">
			<view class="coupon-bottom-box main-flex" @click="goCoupon">领券中心</view>
		</view>
		
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { throttle, debounce } from '@/uni_modules/uview-plus'
import modal from '@/plugins/modal'
import { arrText } from '@/utils/ty'
import { couponSelf, couponProductSelf } from "@/api/app_api/coupon"

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	const provinceList = ref([])
	watch(() => setStore.provinceList, (nVal, oVal) => {
		if (nVal) {
			provinceList.value = setStore.provinceList
		}
	}, { immediate: true })
	
	// tabs
	const tabList = ref([
		{ type: 0, name: '未使用'},
		{ type: 1, name: '已使用'},
		{ type: 2, name: '已失效'}
	])
	const clickTab = (e) => {
		type.value = e.type
		searchFirst()
	}
	
	// 列表查询
	const type = ref(0)
	const tableList = ref([])
	const isLoading = ref(false)
	const status = ref('more')
	const isNull = ref(false)
	
	const searchFirst = () => {
		tableList.value = []
		status.value = 'loading'
		isNull.value = false
		getList()
	}
	
	const getList = () => {
		isLoading.value = true
		// uni.showLoading({
		// 	title: '数据加载中...'
		// })
		
		Promise.all([couponSelf({
			status: type.value
		}), couponProductSelf({
			status: type.value
		})]).then(([result1, result2]) => {
			const coupon1 = result1.data || []
			const coupon2 = result2.data || []
			tableList.value = coupon1.concat(coupon2)
			// console.log(tableList.value)
			status.value = 'no-more'
			isNull.value = tableList.value.length === 0
			isLoading.value = false
		}).catch(() => {
			isLoading.value = false
			isNull.value = false
		})
	}
	
	const goCoupon = () => {
		uni.navigateTo({
			url: '/pages/coupon/list'
		})
	}
	const goCategory = (res) => {
		uni.switchTab({
			url: `/pages/category/category`
		})
	}
	
	onLoad(() => {
		searchFirst()
	})
	
	onShow(() => {
		searchFirst()
	})
	
</script>

<style lang="scss">
	.coupon {
		&-tab {
			position: fixed;
			height: 80rpx;
			width: 100%;
			left: 0;
			background-color: #ffffff;
			z-index: 10;
		}
		&-content {
			padding: 100rpx 20rpx 20rpx;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 116rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 116rpx);
		}
		.coupon-one + .coupon-one {
			margin-top: 20rpx;
		}
		&-item {
			&-btn {
				width: 150rpx;
				height: 48rpx;
				border-radius: 24rpx;
				font-size: 24rpx;
				margin-left: auto;
				border: 1px solid $primary-color;
				color: $primary-color;
				box-sizing: border-box;
				justify-content: center;
			}
		}
		&-bottom {
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			background-color: #ffffff;
			box-sizing: border-box;
			&-box {
				width: 100%;
				height: 96rpx;
				padding: 20rpx;
				box-sizing: border-box;
				justify-content: center;
			}
		}
	}
</style>
